<template>
    <div id="academic">
        学术讨论
        <input type="file" @change="readyIO" accept=".xlsx, .xls, .csv" />
        <img v-show="img" :src="img" alt="" style="width: 800px; height: 500px">
        <!-- 上传 input 文件 -->
        <!-- 上传文件 input， click 使用用来清除选择同一文件的问题 -->
        <input type="file" value="批量上传"
            accept=".xlsx, .xls, .csv"
            id="inpImportFile" ref="inpImportFile"
            @change="getFileData"
            @click="e => {e.target.value = ''}"
            style="display: none" />
        <el-button size="mini" type="success" plain @click="upData_all" > 批量上传 </el-button>

    </div>
</template>
/* xlsxjs Exceljs的学习 */
<script>
// import axios from 'axios'
const ExcelJS = require('exceljs')
import * as XLSX from 'xlsx';
export default {
    name: 'Academic',
    data() {
        return {
            img: '',
        }
    },
    methods: {
        readyIO(e){
            // 创建文件对象，异步读取存储在用户计算机上的文件
            const fileReader = new FileReader();
            fileReader.readAsText(e.target.files[0], 'utf-8');
            fileReader.onload = function() {
                // console.log( fileReader )
            }

            /* 读取文件 */
            this.excelReady(e)
        },
        async excelReady(file) {
            // 获取上传的文件对象
            // const { files } = file.target;
            // 通过FileReader对象读取文件
            /*  读取Blob中内容 保存的将是被读取文件的 ArrayBuffer 数据对象.
                FileReader.readAsArrayBuffer() 

                读取Blob中内容 
                一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
                FileReader.readAsBinaryString()

                读取Blob中内容 一旦完成，result属性中将包含一个字符串以表示所读取的文件内
                FileReader.readAsText()
            */
            const fileReader = new FileReader();

            // 读取文件
            // 以ArrayBuffer方式打开文件  读取本地文件
            // fileReader.readAsBinaryString(file.target.files[0])
            fileReader.readAsArrayBuffer(file.target.files[0])
            // fileReader.readAsText(file.target.files[0]);

            // onload 在读取操作完成时触发
            fileReader.onload = async event => {
                try {
                    // 读取到的数据
                    const datas = event.target.result


                    const workbookExcel = new ExcelJS.Workbook();
                        await workbookExcel.xlsx.load(datas);
                        
                    // 写xlsx
                    // const bufferExcel = await workbookExcel.xlsx.writeBuffer();
                    // bufferExcel.then( (res) => {
                    //     // console.log(res)
                    //     // JSON.parse(String.fromCharCode.apply(null, res))
                    //     const enc = new TextDecoder("utf-8");

                    //     console.log('uint8字节流', enc.decode(res) )
                    // })

                    // console.log('bufferExcel???', bufferExcel)

                    // console.log( '??>>>>>>>>', workbookExcel.getWorksheet(1) )
                    // const blob = new Blob([bufferExcel], {
                    //     // type: "application/octet-stream; charset=utf-8"
                    //     type: 'application/json'
                    // });

                    // 解码成字符串
                    // const decodedString = String.fromCharCode.apply(null, bufferExcel);
                    // console.log(decodedString, JSON.parse(decodedString));

                    console.log('exceljs workbook', workbookExcel, '写入数据', workbookExcel['model'] )
                    console.log('获取数据！！！', workbookExcel['model']['sheets'] )

                    // 读取图片数据
                    console.log('buffer 转 blob', new Blob([workbookExcel['media'][0]['buffer']],{'type': "png"}) )
                    // this.img = FileReaderImg.readAsDataURL( new Blob([workbookExcel['media'][0]['buffer']],{'type': "png"}) ) 
                    this.img = `data:image/jpeg;base64,${window.btoa(String.fromCharCode(...workbookExcel['media'][0]['buffer']))}`;
                    console.log('获取图片数据', workbookExcel['media'] )
                    console.log('是否能转化为 base64 ?', this.img )

                    // 以二进制流方式读取得到整份excel表格对象
                    const workbook = XLSX.read(datas, { type: 'array' });
                    // 输出JSON格式
                    const wsname = workbook.SheetNames[0];//取第一张表
                    const results = XLSX.utils.sheet_to_json(workbook.Sheets["sheet1"]);
                    const results2 = XLSX.utils.sheet_to_json(workbook.Sheets["Sheet2"]);
                    
                    console.log('workbook', workbook, '全部数据', datas, '名称', wsname, 'JOSN转化结果：', results, results2 )
                } catch (error) {
                    console.error('读取文件错误')
                }
                
            }

            fileReader.onerror = err => {
                console.log('文件读取错误 err', err)
            }

            fileReader.onloadend = end => {
                console.log('文件读取结束', end)
            }

            

            // console.log('读取后', fileReader, '状态', fileReader.readyState,)
            // console.log('文件', files)
        },
        /* 上传文件 */
        upData_all() {
            // 触发 input 的点击事件
            this.$refs.inpImportFile.dispatchEvent(new MouseEvent("click"));
        },
        getFileData() {
            const inputFile = this.$refs.inpImportFile.files[0];
            // 创建form对象，需要使用axios的format来上传文件
            let formData = new FormData();
            // 通过append向form对象添加数据
            formData.append("file", inputFile);

            console.log("上传文件的流", formData)
            // axios.post('url', formData, {
            //     headers: { "Content-Type": "multipart/form-data" }
            // })
        }
    },
    
}
</script>